<template>
  <div>
    <el-collapse v-model="activeNames" @change="collapseHandleChange">
      <el-collapse-item title="搜索条件:" name="1">
        <el-row>
          <el-col :span="24">
            <el-form :inline="true" :model="filter" class="demo-form-inline">
              <el-row>
                <el-col :span="4">
                  <el-form-item label="标题">
                    <el-input v-model="filter.title" placeholder="标题" />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="创建人">
                    <el-input v-model="filter.username" placeholder="创建人" />
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="文件类型">
                    <el-input v-model="filter.typeName" placeholder="文件类型" />
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="活动区域">
                    <el-select v-model="filter.region" placeholder="活动区域">
                      <el-option label="区域一" value="shanghai" />
                      <el-option label="区域二" value="beijing" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>
    <el-table
      :data="dataSource"
      style="width: 100%"
      border
      stripe
      highlight-current-row
      height="480"
      @selection-change="tableHandleSelectionChange"
    >
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="45"
      />
      <el-table-column
        fixed
        prop="code"
        label="编号"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="title"
        label="标题"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="typeName"
        label="类型名称"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="status"
        label="状态"
        header-align="center"
        align="center"
      >
        <template slot-scope="scope">
          <el-switch v-model="scope.row.status" active-value="1" inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" />
        </template>
      </el-table-column>
      <el-table-column
        prop="username"
        label="创建人"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="date"
        label="创建时间"
        header-align="center"
        align="center"
      />
      <el-table-column
        fixed="right"
        label="操作"
        header-align="center"
        align="center"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="() => updateFile(scope.row)">编辑</el-button>
          <el-button type="text" style="color: #f40" size="small" @click="() => deleteFile(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="pagination.size"
      :current-page="pagination.pageindex"
      :total="pagination.total"
      @current-change="fetch"
    />
  </div>
</template>
<script>
import { getList } from '@/api/fileType'

export default {
  name: 'FileTypeList',
  data() {
    return {
      filter: { // 过滤条件
        title: '',
        username: '',
        region: ''
      },
      selectIds: [], // 选择的id列表
      pagination: { // 分页参数
        pageindex: 1,
        pagesize: 10,
        total: 0
      },
      activeNames: '1', // 折叠面板
      dataSource: [] // 数据源
    }
  },
  created() {
    this.fetch()
  },
  methods: {
    // 折叠面板发生改变
    collapseHandleChange(val) {
      console.log('折叠面板发生改变 => ', val)
      this.filter = {
        title: '',
        username: '',
        region: ''
      }
    },
    // 删除文件
    deleteFile(id) {
      console.log('删除文件 ID => ', id)
    },
    // 选择改变
    tableHandleSelectionChange(array) {
      console.log(array)
    },
    // 获取数据
    async fetch() {
      const params = { ...this.filter, ...this.pagination }
      const { data } = await getList(params)
      console.log('获取数据 => ', data)
      this.dataSource = data.list
    },
    // 编辑文件类型
    updateFile(obj) {
      console.log(obj)
    }
  }
}
</script>

<style scoped>

</style>
